import React from 'react';
import {
  View,
  TouchableOpacity,
  Image,
  Text,
} from 'react-native';
import Video from 'react-native-video';

import Config from '../../config';
import {DateUtils, HtmlUtils} from '../../utils/Utils';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import NewsConstants from '../../common/NewsConstants';
import BaseComponent from '../common/BaseComponent';
import TVideoComponent from '../../components/TVideoComponent';

import NewsRequestContentAction from '../../actions/news/NewsRequestContentAction';
import CommonRequestUrlAction from '../../actions/common/CommonRequestUrlAction';

export default class NewsVideoView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state.newsData = this.props.fullScreenData;
    this.state.isResponeUpdate = false;

    this._video = null;
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate) {
      nextState.isResponeUpdate = false;
      if(nextState.newsData.content && nextState.newsData.content.indexOf("http") == 0) {
        this._requestContent(nextState.newsData);
      }
    }
    if(nextProps.fullScreenData.news_id != this.props.fullScreenData.news_id) {
      nextState.newsData = this.props.fullScreenData;
      this._requestData();
    }
  }

  componentDidMount() {
    this._requestData();
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
        height:SizeUtils.getWindowSize().height,
        paddingTop:Config.statusBarHeight,
        backgroundColor:"#000000ee", flexDirection:"column"}}>
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(500)}}>
          {this._renderTitle()}
          {this._renderFrom()}
          {this._renderContentView()}
        </View>
        {this._renderVideoContent()}
        {this._renderShareView()}
      </View>
    )
  }

  _renderTitle() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(40), paddingLeft:SizeUtils.translateDesignWidthToCode(30),
        paddingRight:SizeUtils.translateDesignWidthToCode(40)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#999999"}}>{this.state.newsData.title}
        </Text>
      </View>
    )
  }

  _renderFrom() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(40), paddingLeft:SizeUtils.translateDesignWidthToCode(30),
        paddingRight:SizeUtils.translateDesignWidthToCode(40), flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999"}}>来自: {this.state.newsData.source}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(39 * 2 + 48), height:SizeUtils.translateDesignWidthToCode(48),
            flexDirection:"row", justifyContent:"space-between"}}>
          <TouchableOpacity onPress={this._onPressComment.bind(this)}>
            <Image source={require('../../../resource/images/common/pl_g.png')} style={{width:SizeUtils.translateDesignWidthToCode(39),
              height:SizeUtils.translateDesignWidthToCode(36)}}/>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._onPressShare.bind(this)}>
            <Image source={require('../../../resource/images/common/share_g.png')} style={{width:SizeUtils.translateDesignWidthToCode(39),
              height:SizeUtils.translateDesignWidthToCode(36)}}/>
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  _renderContentView() {
    return (
      <View style={{paddingLeft:SizeUtils.translateDesignWidthToCode(40),
        paddingRight:SizeUtils.translateDesignWidthToCode(40),}}>
      </View>
    )
  }

  _renderVideoContent() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
      height:SizeUtils.translateDesignHeightToCode(420),
      position:"absolute"}} >
        <TVideoComponent style={{
          width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignHeightToCode(420)}}
          videoUrl = {this.state.newsData.video_url}
          onClose = {this._videoComponentClose.bind(this)}
          ref={(ref) => this._video = ref}
        />
      </View>
    )
  }

  _videoComponentClose() {
    this.props.onClose();
  }

  _onPressComment() {
    this._video && this._video.close();
    this.gotoPage(Config.pages.common_comment, {data:this.state.newsData, moduleType:Constants.MODULE_TYPE.NEWS});
  }

  _onPressShare() {
    this.setState({
      showShare:true,
    })
  }

  _getShareData() {
    return {type:Constants.MODULE_TYPE.NEWS, news_id:this.state.newsData.news_id,title:this.state.newsData.title}
  }

  _requestData() {
    new NewsRequestContentAction().call(this, {news_id:this.state.newsData.news_id});
  }

  _requestContent(url) {
    new CommonRequestUrlAction().call(this, {url:url})
  }
}
